<template>
	<view class="main">
		<view class="flex align between topSearch">
			<view style="width: 80%;">
				<uni-search-bar v-model="searchValue" @input="input" placeholder="输入优惠券名搜索">
				</uni-search-bar>
			</view>
			<view class="addBtn flex align" @click="toUrl()">添加<uni-icons type="plus" size="20"
					color="#fff"></uni-icons></view>
		</view>
<!-- 		<view class="tabs flex align between">
			<view class="flex align tab-item" @click="toShow">
				{{statusName}}
				<image src="../../static/icon3.png"></image>
				<view class="tab-option" v-if="show">
					<view @click="toAct('-1','全部状态')">全部状态</view>
					<view @click="toAct('0','抖音外卖')">抖音外卖</view>
					<view @click="toAct('1','探店')">探店</view>
				</view>
			</view>
		</view> -->
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="list-head flex align between">
				<view>{{item.coupon_name}}</view>
				<view>
					<switch :checked="item.statusA" :data-id="item.id" @change="switch1Change"
						style="transform:scale(0.7)" color="#F39C12" />
					<!-- <u-switch v-model="item.statusA" :data-id="item.id" size="20" @change="change" activeColor="#F39C12"></u-switch> -->
				</view>
			</view>
			<view class="list-info flex between" @click="toLook(item.id)">
				<view class="list-info-left">
				<!-- 	<view class="flex align">
						<view style="width: 30%;">类型</view>
						<text>{{item.type==1?'满减卷':'折扣卷'}}</text>
					</view> -->
					<view class="flex align">
						<view style="width: 30%;">金额/折扣</view>
						<text>{{item.price}}</text>
					</view>
					<view class="flex align">
						<view style="width: 30%;">满足金额</view>
						<text>{{item.reach_price}}</text>
					</view>
					<view class="flex align">
						<view style="width: 30%;">剩余</view>
						<text>{{item.limit}}</text>
					</view>
					<view class="flex align">
						<view style="width: 30%;">创建时间</view>
						<text>{{item.addtime}}</text>
					</view>
				</view>
				<view class="list-info-right">
					<view>类型</view>
					<view class="riBtn riBtn1" v-if="item.type==1">满减卷</view>
					<view class="riBtn riBtn2" v-else>折扣卷</view>
				</view>
			</view>
			<view class="trash flex align between">
				<view class="flex align" @click="toUrl(item)"> 编辑<uni-icons color="#fff" type="compose" size="20"></uni-icons></view>
				<view class="flex align" @click="toDel(item.id)"> 删除<uni-icons color="#fff" type="trash" size="20"></uni-icons></view>
			</view>
		</view>
		<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
		<uni-load-more :status="status" v-if="!empty" :content-text="loadText"></uni-load-more>
		<!-- 活动码 -->
		<u-popup :show="showCode" mode="center" :closeable="true" @close="showCode=false">
			<view class="showCode">
				<view class="code-tit">活动码下载</view>
				<view class="flex align codes between">
					<view class="code-item" v-if="imgList.qrcode!=''">
						<image mode="widthFix" :src="imgList.qrcode"></image>
						<view>下载</view>
					</view>
					<view class="code-item" v-if="imgList.qrcode_by!=''">
						<image mode="widthFix" :src="imgList.qrcode_by"></image>
						<view>下载</view>
					</view>
				</view>
				<view class="code-tit" v-if="imgList.haibao!=''">海报下载</view>
				<view class="flex align codes between" v-if="imgList.haibao!=''">
					<view class="code-item">
						<image mode="widthFix" :src="imgList.haibao"></image>
						<view>下载</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		businessCouponGet,
		activityUserMulti,
		activityQrcode,
		activityUserdel
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				showCode: false,
				searchValue: '',
				show: false,
				totalPage: 1,
				page: 0,
				offset: 20,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				statusA: '-1',
				statusName: '全部状态',
				imgList: {
					haibao: '',
					qrcode: '',
					qrcode_by: ''
				}
			};
		},
		onLoad() {
			// console.log(decodeURIComponent('%7B%22activity_name%22%3A%22%E8%80%81%22%7D'))
			// console.log(decodeURIComponent('%7B%22activity_name%22%3A%22%E8%80%81%22%7D'))
			// console.log(decodeURIComponent('%7B%22activity_name%22%3A%22LIKE%22%7D'))
			// console.log(decodeURIComponent('%7B%22activity_name%22%3A%22LINK%22%7D'))
		},
		onShow() {
			this.page = 0
			this.list = []
			this.getlist();
		},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		methods: {
			toUrl2(id){
				uni.navigateTo({
					url:'/pages/activity/sendList?id='+id
				})
			},
			toDel(id){
				let that = this
				uni.showModal({
					title: "提示",
					content: "确定要删除这条记录吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							that.toDelCom(id)
						} else {
							
						}
					}
				
				})
			},
			async toDelCom(id){
				const result = await activityUserdel({
					action:'del',
					ids:id
				})
				if(result.code==1){
					uni.showToast({
						title:result.msg
					})
					this.page = 0
					this.list = []
					this.getlist();
				}else{
					uni.showToast({
						title:result.msg,
						icon:'error'
					})
				}
			},
			toShowCode(id) {
				this.showCode = true
				this.getCode(id)
			},
			change(e) {
				console.log(e)
			},
			switch1Change(e) {
				console.log(e)
				let id = e.currentTarget.dataset.id
				let value = e.detail.value
				this.toChange(id, value)
			},
			async getCode(id) {
				const result = await activityQrcode({
					activity_id: id
				})
				if (result.code == 1) {
					this.imgList = result.data
				}
			},
			async toChange(id, value) {
				let v = 1
				if (value == false) {
					v = 0
				} else {
					v = 1
				}
				let parm = 'status=' + v
				let obj = {
					ids: id,
					params: parm
				}
				const result = await activityUserMulti(obj)
				if (result.code == 1) {
					uni.showToast({
						title: '操作成功'
					})
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			toLook(id) {
				// uni.navigateTo({
				// 	url: '/pages/videoProdue/createLook?id=' + id
				// })
			},
			toAct(n, name) {
				this.statusA = n
				this.statusName = name
				this.page = 0
				this.list = []
				this.getlist();
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					group_id,
					type,
					searchValue,
					statusA
				} = that;
				let obj = {
					menu_url: 'business_coupon',
					limit: offset,
					offset: page,
					filter: {},
					op: {}
				};
				if (searchValue != '') {
					if (statusA != '-1') {
						obj.filter = JSON.stringify({
							type: statusA,
							coupon_name: searchValue
						})
						obj.op = JSON.stringify({
							type: '=',
							coupon_name: 'LIKE'
						})
					} else {
						obj.filter = JSON.stringify({
							coupon_name: searchValue
						})
						obj.op = JSON.stringify({
							coupon_name: 'LIKE'
						})
					}
				} else {
					if (statusA != '-1') {
						obj.filter = JSON.stringify({
							type: statusA,
						})
						obj.op = JSON.stringify({
							type: '=',
						})
					} else {
						obj.filter = {}
						obj.op = {}
					}
				}

				that.status = 'loading';
				if (totalPage > page) {
					let result = await businessCouponGet(obj);
					that.page = page + 1;
					if (result.total == 0) {
						that.empty = true;
						that.status = 'nomore';
						return;
					}
					that.empty = false;
					setTimeout(() => {
						that.status = 'loadmore';
					}, 500);
					result.rows.forEach(item => {
						if (item.status == 1) {
							item.statusA = true
						} else {
							item.statusA = false
						}
					})
					that.list = list.concat(result.rows);
					that.totalPage = Math.ceil(result.total / offset);
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
			toShow() {
				this.show = !this.show
			},
			input(e) {
				this.page = 0
				this.list = []
				this.getlist();
			},
			toUrl(item) {
				if(item){
					let obj = JSON.stringify(item)
					uni.navigateTo({
						url: '/pages/activity/couponAdd?item='+obj
					})
				}else{
					uni.navigateTo({
						url: '/pages/activity/couponAdd'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 13rpx 30rpx;
	}

	.showCode {
		width: 600rpx;

		.code-tit {
			font-weight: bold;
			padding: 20rpx;
			border-bottom: solid 1rpx gainsboro;
		}

		.codes {
			padding: 20rpx;

			.code-item {
				width: 48%;

				view {
					background: #ffab8f;
					width: fit-content;
					margin: 10rpx auto;
					padding: 5rpx 20rpx;
					font-size: 28rpx;
					color: white;

				}
			}

			image {
				width: 100%;
				max-height: 400rpx;

			}
		}
	}

	.topSearch {
		.addBtn {
			background: #FFCDB8;
			color: white;
			border-radius: 14rpx;
			font-size: 20rpx;
			padding: 8rpx 14rpx;
		}
	}

	.tabs {
		background: white;
		padding: 15rpx 0;

		.tab-item {
			flex: 1;
			text-align: center;
			justify-content: center;
			position: relative;

			image {
				width: 22rpx;
				height: 12rpx;
				margin-left: 26rpx;
			}

			.tab-option {
				position: absolute;
				width: 100%;
				top: 60rpx;
				background: white;
				box-shadow: 1rpx 1rpx 1rpx 2rpx gainsboro;

				view {
					padding: 16rpx 0;
					border-bottom: solid 1rpx #D9D9D9;
				}
			}
		}
	}

	.list {
		background: white;
		margin-top: 19rpx;
		border-radius: 15rpx;

		.list-head {
			margin: 18rpx;
			padding: 26rpx 0 8rpx 0;
			border-bottom: solid 1rpx #D6D6D6;
			padding-bottom: 8rpx;

			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
			}

			view:nth-child(2) {
				color: #868686;
				font-size: 18rpx;
			}
		}

		.list-info {
			padding: 8rpx 0;
			padding: 0 41rpx 23rpx;

			.list-info-left {
				view {
					margin-bottom: 10rpx;
				}

				font-size: 24rpx;

				text {
					margin-left: 77rpx;
					font-weight: bold;
				}
			}

			.list-info-right {
				text-align: center;

				view:nth-child(1) {
					font-size: 28rpx;
					font-weight: bold;
				}

				.riBtn {
					color: white;
					font-size: 24rpx;
					border-radius: 20rpx;
					margin-top: 16rpx;
					width: 140rpx;
					text-align: center;
					padding: 5rpx 0;
				}

				.riBtn1 {
					background: #F39C12;
				}

				.riBtn2 {
					background: #24C1B9;
				}
			}
		}

		.trash {
			background: #2D2D2D;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
			padding: 15rpx 0;
			border-radius: 0 0 15rpx 15rpx;
			.flex{
				width: 100%;
				justify-content: center;
			}
		}
	}
</style>